<div class="user-token-container">

  <div class="user-token-date">
    <div>
      <span class="mr-16">日期设置:</span>
      <nz-date-picker [nzShowToday]="false" nzPlaceHolder="请选择到期时间" [ngModel]="showDateValue"
        (ngModelChange)="onChange($event)" [nzRenderExtraFooter]="dateTokenTemp" 
        [nzDisabledDate]="disabledStartDate">
      </nz-date-picker>
      <ng-template #dateTokenTemp>
        <a (click)="today()" class="mr-sm">今天</a>
        <a (click)='lastDay()'>最后一天（许可到期）</a>
      </ng-template>
    </div>
    <div class="mt-16" *ngIf="!tokenMark">
      <button nz-button [nzType]="'primary'" class="add-token-button" (click)="addToken()">生成token</button>
    </div>
    <div class="mt-16" *ngIf="tokenMark">
      <button nz-button [nzType]="'danger'" class="other-token-button" (click)="refreshToken()">重置token</button>
      <button nz-button [nzType]="'primary'" class="other-token-button" (click)="refreshTokenTime()">更新时间</button>
    </div>
  </div>

  <div class="user-token-content" *ngIf="tokenMark">
    <div class="token-card">
      <div class="token-card-content" id="copyInput">
       {{tokenContent}}
      </div>
      <div class="token-card-control">
        <span nz-tooltip nzTitle="复制token" (click)="copyToken()">
          <i nz-icon type="copy" theme="outline"></i>
        </span>
        <nz-divider nzType="vertical"></nz-divider>
        <span nz-tooltip nzTitle="删除token">
          <a  nz-popconfirm nzTitle="是否删除当前token?" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">
            <i nz-icon type="delete" theme="outline"></i>
          </a>
        </span>
      </div>
    </div>
  </div>

  <div class="user-token-describe">
    <h1 class="token-center">什么是用户令牌?</h1>
    <p class="token-danger">提示：出于安全考虑，我们建议令牌的最长有效时间为90天， 到期后重新选择时间即可</p>
    <p>概述：用户令牌是每个用户的身份象征，当我们在希望通过API访问SourceCheck进行相关操作时我们需要你提供此令牌来确保此次访问是合法的，
      通常我们使其作为与其他应用绑定的一种约定，每个用户具有唯一的与其他用户不同的令牌。</p>
    <p>作用：当通过API的方式访问SourceCheck时，用户令牌用于判断此操作是否合法，进而判断是否可以执行运行下去</p>
    <p>重置：如果我们的令牌不小心泄露出去或者因为其他某些原因需要更换，可以点击重置按钮来重置。</p>
    <div class="tc">
      <img src="./assets/imgs/user-token.png" alt="" class="user-token-img">
    </div>
  </div>
</div>
